import dayjs from 'dayjs'
import { useNavigate, useLocation } from 'react-router-dom'
import style from './style.module.scss'
import WishTop from './components/wishTop'
import formatNum from '../../utils/money'
import { Button, Popup, Calendar, Stepper, Swiper } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { EditFill, DeleteOutline, RightOutline } from 'antd-mobile-icons'
import Wish from '../../api/wish'
const { userbox, btnBox, startBtn, goodsItem, proInfo, CalBox, btn1, numBox, settingBox, nameBox, bottomp } = style
const Wchild = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const [visible5, setVisible5] = useState(false)
  const [visible1, setVisible1] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [visible3, setVisible3] = useState(false)
  const [visible6, setVisible6] = useState(false)
  const [message, setMessage] = useState(location.state?.wishItem.title || '')
  const today = dayjs()
  const [val, setVal] = useState<[Date, Date] | null>(() => [
    today.subtract(2, 'day').toDate(),
    today.add(2, 'day').toDate(),
  ])
  //宠物数量
  const [petvalue, setpetvalue] = useState<number>(0)
  //人数
  const [manvalue, setmanvalue] = useState<number>(1)
  //儿童
  const [childvalue, setchildvalue] = useState<number>(0)
  //婴儿
  const [babyvalue, setbabyvalue] = useState<number>(0)
  const [wishItem ,setWishItem] = useState<any>()
  const getwishList =async () => {
    let res = await Wish['getWishItem'](location.state.wishItem.id )
    
    setWishItem(res.data[0])
  }
  console.log(wishItem, 'wishItem');
  
  const onEdit = () => {
    setVisible1(true)
  }
  //重命名
  const Rename = async () =>  {
    let res = await Wish['updatewListName']({name:message, id:location.state?.wishItem.id } )
    if(res.code === 200 ){
      setnewName(res.data.data.title)
    }
  }
  const [newName, setnewName] = useState(location.state?.wishItem.title || '')
  //删除
  const DelWish = async () => {
    await Wish['delwList'](location.state?.wishItem.id)
  }
  //日期
  const [wishDate, setWishDate] = useState<any>()
  
  const addDate =async () => {
    let num = manvalue >1 || childvalue || petvalue || babyvalue ? `${manvalue ? childvalue ? manvalue + childvalue + '人' : manvalue + '人' : childvalue + '人'}  ${babyvalue ? ',' + babyvalue + '名婴幼儿' : ''} ${petvalue ? ',' + petvalue + '只宠物' : ''} ` : '人数'
     await Wish['updatewListDateAndPeople']({date:wishDate, id:location.state?.wishItem.id ,people:num})
     getwishList()
  }
  const delDate =async () => {
    await Wish['updatewListDateAndPeople']({date:'', id:location.state?.wishItem.id ,people:''})
  }
  const [disWishDate,setDisWishDate] = useState<any>()
  useEffect(() => {
    setDisWishDate( location.state.wishItem.date )
    getwishList()
  },[])
  // const add
  return <div>
    {/* 头部组件 */}
    <WishTop click={onEdit}></WishTop>
    {/* 点击头部···弹出框 */}
    <Popup
      visible={visible1}
      onMaskClick={() => {
        setVisible1(false)
      }}
      showCloseButton
      onClose={() => setVisible1(false)}
      bodyStyle={{
        borderTopLeftRadius: '8px',
        borderTopRightRadius: '8px',
        minHeight: '35vh',
      }}
    >
      <div className={settingBox}>
        <div>设置</div>
        <p onClick={() => setVisible2(true)} style={{ borderBottom: '1px solid #b0b0b0' }}><span><EditFill /> 重命名</span> <RightOutline /></p>
        <p onClick={() => setVisible3(true)} ><span><DeleteOutline />   删除</span><RightOutline /></p>
      </div>

    </Popup>
    {/* 重命名 */}
    <Popup
      visible={visible2}
      onMaskClick={() => {
        setVisible2(false)
      }}
      showCloseButton
      onClose={() => setVisible2(false)}
      bodyStyle={{
        borderTopLeftRadius: '8px',
        borderTopRightRadius: '8px',
        minHeight: '45vh',
      }}
    >
      <div className={nameBox}>
        <div>重命名心愿单</div>
        <section>
          <p>名称</p>
          <input type="text" defaultValue={message} onChange={e => setMessage(e.target.value)} />
        </section>
        <p>{message.length}/50个字符</p>
        <p className={bottomp}><button className={btn1} onClick={() => { setVisible2(false); setMessage(newName) }}><u>取消</u></button><button onClick={() => { setVisible2(false); setVisible1(false); Rename() }}>保存</button></p>
      </div>

    </Popup>
    {/* 删除 */}
    <Popup
      visible={visible3}
      onMaskClick={() => {
        setVisible3(false)
      }}
      showCloseButton
      onClose={() => setVisible3(false)}
      bodyStyle={{
        borderTopLeftRadius: '8px',
        borderTopRightRadius: '8px',
        minHeight: '20vh',
      }}
    >
      <div className={nameBox}>
        <div>删除此心愿单？</div>

        <p className={bottomp}><button className={btn1} onClick={() => { setVisible3(false); }}><u>取消</u></button><button onClick={() => { setVisible3(false); setVisible1(false); DelWish(); navigate('/wish') }}>确定</button></p>
      </div>

    </Popup>
    <div className={userbox}>
      <h2 style={{ fontSize: '26px' }}>{newName ? newName : "默认合辑"}</h2>
      <div className={btnBox}>

        <div ><Button style={{ fontSize: '12px' }} onClick={() => { setVisible5(true) }}>{disWishDate?disWishDate:wishDate?wishDate:'日期' }</Button>
          <Popup visible={visible5} onMaskClick={() => { setVisible5(false) }} bodyStyle={{ borderTopLeftRadius: '8px', borderTopRightRadius: '8px', minHeight: '55vh', }}>
            <div className={CalBox}>
              <h2>日期</h2>
              <div >
                <Calendar
                  selectionMode='range'
                  value={val}
                  onChange={val => {
                    setVal(val)
                  }}
                />
              </div>
              <hr />
              <p><button onClick={() => {setWishDate('') ; delDate(); setVal(null)}} className={btn1}><u>重置</u> </button><button onClick={() => { setWishDate(val?val[0].getMonth() + 1 + '月' + val[0].getDate() + '日至' + val[1].getDate() + '日' : '日期'); setVisible5(false);addDate() }}> 保存</button></p>
            </div>
          </Popup>
        </div>
        <div><Button style={{ fontSize: '12px' }} onClick={() => { setVisible6(true) }}>{wishItem?.people?wishItem?.people:'人数'}</Button>
          <Popup visible={visible6} onMaskClick={() => { setVisible6(false) }} bodyStyle={{ borderTopLeftRadius: '8px', borderTopRightRadius: '8px', minHeight: '55vh', }}>
            <div className={CalBox}>
              <h2>人数</h2>

              <div >
                <div className={numBox}>
                  <div>
                    <p style={{ fontSize: '16px' }}>成人</p>
                    <p style={{ fontSize: '14px', color: '#b0b0b0' }}>13岁或以上</p>
                  </div>
                  <div><Stepper min={1} defaultValue={1} onChange={value => setmanvalue(value)} /></div>
                </div>
                <div className={numBox}>
                  <div>
                    <p style={{ fontSize: '16px' }}>儿童</p>
                    <p style={{ fontSize: '14px', color: '#b0b0b0' }}>2 - 12 岁</p>
                  </div>
                  <div><Stepper min={0} value={childvalue} onChange={value => setchildvalue(value)} /></div>
                </div>
                <div className={numBox}>
                  <div>
                    <p style={{ fontSize: '16px' }}>婴儿</p>
                    <p style={{ fontSize: '14px', color: '#b0b0b0' }}>2岁以下</p>
                  </div>
                  <div><Stepper min={0} value={babyvalue} onChange={value => setbabyvalue(value)} /></div>
                </div>
                <div className={numBox}>
                  <div>
                    <p style={{ fontSize: '16px' }}>宠物</p>
                    <p style={{ fontSize: '14px', color: '#b0b0b0' }}><u>需要携带服务类动物？</u> </p>
                  </div>
                  <div><Stepper min={0} value={petvalue} onChange={value => setpetvalue(value)} /></div>
                </div>

              </div>
              <hr />
              <p><button className={btn1} onClick={() => { setbabyvalue(0); setchildvalue(0); setpetvalue(0); setmanvalue(1) }}><u>重置</u></button><button onClick={() => {  setVisible6(false) ;addDate()}}>保存</button></p>
            </div>
          </Popup>
        </div>
      </div>
      {
        location.state && location.state.wishItem.children.length > 0 ? location.state.wishItem.children.map((item: any) => <div onClick={() => navigate('/details' ,{state:{proinformation:item , date:val}})} key={item.proname} className={goodsItem}>
          <Swiper>{item.banners.map((itm: any) => (
            <Swiper.Item key={itm}>
              <img src={itm} alt="" />
            </Swiper.Item>
          ))}</Swiper>
          <div className={proInfo}><p>{item.proname}</p><span>★ {item.score}</span></div>
          <span>距离你 {item.distance} 公里</span>
          <div>{item.time}</div>
          <s>￥{formatNum(item.price)}</s> 晚
        </div>) : <div>
          <div>
            <h3 style={{ fontSize: '22px', fontWeight: 'normal', marginTop: '30px' }}>尚无收藏的内容</h3>
            <p style={{ fontSize: '14px', marginTop: '22px' }}>搜索时，点击心形图标即可将你喜欢的房源或体验保存到心愿单</p>
          </div>
          <div>
            <button className={startBtn} onClick={() => navigate('/')}>开始浏览</button>
          </div>
        </div>
      }
    </div>
  </div>
}
export default Wchild
